<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>react</title>
    <script src="../js/react.development.js"></script>
    <script src="../js/react-dom.development.js"></script>
    <script src="../js/babel.min.js"></script>

    <style>
        .title{
            background-color: aqua;
        }
    </style>
</head>
<body>
    <div id="test">

    </div>
    <script type="text/babel">
        // 模拟数据
        const data = 'hello,i'

        // 创建虚拟dom
        // let VDOM = <h1>hellohello,react</h1>
        let VDOM = (
            <div>
                <h1 style={{color:"white",fontSize:'60px'}} className='title'>{data}</h1>
                <h2>Hello,0922</h2>
                <input type="text" />

                {/* <Peiqi>佩奇</Peiqi> */}
            </div>
        )
        ReactDOM.render(VDOM,document.getElementById('test'))


        /**
         * jsx的语法规则：
         *      1、创建虚拟dom是，不要写引号    
         *              let VDOM = <h1>hellohello,react</h1>
         *      2、标签中要混入js表达式，要用{}
         *              let VDOM = <h1>{data}</h1>
         *      3、标签中样式的类名要用className
         *      4、标签中的内联样式要用style={{color:'white'}},注意属性名转为小驼峰命名
         *      5、只能有一个根标签
         *      6、标签必须闭合
         *      7、关于标签首字母
         *              (1).若首字母小写，那么react就会去寻找与之同名的html标签
         *                      找到：直接转为html的同名元素
         *                      未找到：报错
         *              (2).若首字母大写，那么react就会去寻找与之同名的组件
         *                      找到：那么就使用组件
         *                      未找到：报错
         *      8、注释jsx:  
         *              
         * */ 
    </script>
    
</body>
</html>